<template>
  <div>
    <div class="form">
        <!-- 游戏区服 -->
        <div class="form-item">
            <text class="label">游戏区服</text>
            <el-cascader placeholder="请选择您所在的区服" v-model="formData.selectedServer" :options="serverTree"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showServerPicker">
                <view class="selected-tag">
                    {{ `${serverTree[selectedGroupIndex].text}/${selectedServer}` || '请选择您所在的区服' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 代练类型 -->
        <div class="form-item">
            <text class="label">代练类型</text>
            <el-select v-model="formData.mode" placeholder="请选择代练类型" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in modeTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showModePicker">
                <view class="selected-tag">
                    {{ mode || '请选择代练类型' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 游戏模式 -->
        <div class="form-item" v-if="formData.mode == '代币' | formData.mode == '宝典'">
            <text class="label">游戏模式</text>
            <el-select v-model="formData.gameMode" placeholder="请选择游戏模式" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in gameModeTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showGameModePicker">
                <view class="selected-tag">
                    {{ gameMode || '请选择游戏模式' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 通行证 -->
        <div class="form-item" v-if="formData.mode == '代币' | formData.mode == '宝典'">
            <text class="label">通行证</text>
            <el-radio-group v-model="formData.selectPass">
                <el-radio value="已有通行证" size="large" border>已有通行证</el-radio>
                <el-radio value="已有点卷" size="large" border>已有点卷</el-radio>
            </el-radio-group>
            <!-- <div class="handle" style="width: 80%;">
                <view class="selected-tag">
                    <el-radio-group v-model="formData.selectPass">
                        <el-radio value="已有通行证" size="large" border>已有通行证</el-radio>
                        <el-radio value="已有点卷" size="large" border>已有点卷</el-radio>
                    </el-radio-group>
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 代练任务（代币） -->
        <div class="form-item" v-if="formData.mode == '代币'">
            <text class="label">代练任务</text>
            <el-input v-model="formData.currentTokens" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入当前代币" />
            <el-input v-model="formData.toTokens" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入目标代币" />
            <!-- <div class="handle" @click="showCurrentTokensPicker">
                <view class="selected-tag">
                    {{ (formData.currentTokens === '' && formData.toTokens === '') ? '请输入当前代币和目标代币' :
                        `代币${formData.currentTokens}个-${formData.toTokens}个`
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 代练任务（宝典） -->
        <div class="form-item" v-if="formData.mode == '宝典'">
            <text class="label">代练任务</text>
            <el-input v-model="formData.currentLevel" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入当前等级" />
            <el-input v-model="formData.toLevel" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入目标等级" />
            <!-- <div class="handle" @click="showCurrentLevelPicker">
                <view class="selected-tag">
                    {{ (formData.currentLevel === '' && formData.toLevel === '') ? '请输入当前等级和目标等级' :
                        `${formData.currentLevel}级-${formData.toLevel}级`
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 排位类型 -->
        <div class="form-item" v-if="formData.mode == '排位赛' | formData.mode == '定位赛'">
            <text class="label">排位类型</text>
            <el-select v-model="formData.rankType" placeholder="请选择组排方式" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in rankTypeTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showRankTypePicker">
                <view class="selected-tag">
                    {{ rankType || '请选择组排方式' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 代练任务（排位赛） -->
        <div class="form-item" v-if="formData.mode == '排位赛'">
            <text class="label">代练任务</text>
            <el-cascader placeholder="请选择当前段位" v-model="formData.currentTask" :options="Task"
                style="width: 200px;margin-bottom: 10px;" />
            <el-cascader placeholder="请选择目标段位" v-model="formData.toTask" :options="Task"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showCurrentTaskTypePicker">
                <view class="selected-tag">

                    {{ (currentTask === '' && toTask === '') ? '请选择当前段位和目标段位' :
                        `${currentTask}-${toTask}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 当前胜点 -->
        <div class="form-item" v-if="formData.mode == '排位赛'">
            <text class="label">当前胜点</text>
            <el-input v-model="formData.currentScore" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入当前胜点" />
            <!-- <div class="handle" @click="showCurrentScorePicker">
                <view class="selected-tag">
                    {{ formData.currentScore === '' ? '请输入当前胜点' : formData.currentScore
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 上赛季段位 -->
        <div class="form-item" v-if="formData.mode == '定位赛'">
            <text class="label">上赛季段位</text>
            <el-select v-model="formData.beforeLevel" placeholder="请选择上赛季段位" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in beforeLevelTree" :key="index" :label="item.text"
                    :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showBeforeLevelPicker">
                <view class="selected-tag">
                    {{ beforeLevel || '请选择上赛季段位' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 需打场次 -->
        <div class="form-item" v-if="formData.mode == '定位赛'">
            <text class="label">需打场次</text>
            <el-select v-model="formData.needGames" placeholder="请选择需打场次" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in needGamesTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showNeedGamesPicker">
                <view class="selected-tag">

                    {{ (needGames === '') ? '请选择需打场次' :
                        `${needGames}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 游戏账号 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏账号</text>
            <el-input v-model="formData.account" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏账号" />
        </div>
        <!-- 游戏密码 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏密码</text>
            <el-input v-model="formData.password" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏密码" />
        </div>
        <!-- 游戏角色 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏角色</text>
            <el-input v-model="formData.username" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏角色名" />
        </div>
        <!-- 发单者联系方式（必填） -->
        <div class="form-item" v-if="showOrder">
            <text class="label">发单者联系方式（必填）</text>
            <el-input v-model="formData.contact" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入发单者的联系方式" />
        </div>
        <!-- 指定英雄（加价30%） -->
        <div class="form-item" v-if="showOrder && formData.mode != '宝典'">
            <text class="label">指定英雄（加价30%）</text>
            <el-select filterable :filter-method="heroFilterMethod" v-model="formData.hero" placeholder="请选择指定英雄"
                size="large" style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in filteredHeroes" :key="index" :label="item.text"
                    :value="item.value" />
            </el-select>
        </div>
    </div>

    <!-- 游戏区服选择弹窗 -->
    <el-dialog v-model="serverPopup" title="请选择游戏区服" width="1000" :before-close="hideServerPicker">
        <div class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div class="popup-nav">
                    <div v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                        :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                        {{ group.text }}
                    </div>
                </div>

                <!-- 右侧选择内容 -->
                <div class="popup-scroll">
                    <div v-if="selectedGroupIndex !== null" class="popup-group">
                        <div v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                            class="popup-item" @click="selectServerItem(item)">
                            {{ item.text }}
                        </div>
                    </div>
                    <div v-else class="popup-empty">请选择左侧分类</div>
                </div>
            </div>
        </div>
    </el-dialog>

    <!-- 代练类型选择弹窗 -->
    <el-dialog v-model="modePopup" width="1000" :before-close="hideModePicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in modeTree" :key="index" class="popup-item" @click="selectModeItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 游戏模式选择弹窗 -->
    <el-dialog v-model="gameModePopup" width="1000" :before-close="hideGameModePicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in gameModeTree" :key="index" class="popup-item"
                    @click="selectGameModeItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <!-- 代练任务（代币）弹窗 -->
    <el-dialog v-model="currentTokensPopup" width="1000" :before-close="hideCurrentTokensPicker">
        <view class="popup-content">
            <view>
                <div class="level">
                    <span>当前代币</span>
                    <input type="number" placeholder="请输入当前代币" v-model="currentTokens">
                </div>
                <div class="role">
                    <span>目标代币</span>
                    <input type="number" placeholder="请输入目标代币" v-model="toTokens">
                </div>
            </view>
        </view>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="hideCurrentTokensPicker">取消</el-button>
                <el-button type="primary" @click="confirmCurrentTokensPicker">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 代练任务（宝典）弹窗 -->
    <el-dialog v-model="currentLevelPopup" width="1000" :before-close="hideCurrentLevelPicker">
        <view class="popup-content">
            <view>
                <div class="level">
                    <span>当前等级</span>
                    <input type="number" placeholder="请输入当前等级" v-model="currentLevel">
                </div>
                <div class="role">
                    <span>目标等级</span>
                    <input type="number" placeholder="请输入目标等级" v-model="toLevel">
                </div>
            </view>
        </view>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="hideCurrentLevelPicker">取消</el-button>
                <el-button type="primary" @click="confirmCurrentLevelPicker">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 排位类型选择弹窗 -->
    <el-dialog v-model="rankTypePopup" width="1000" :before-close="hideRankTypePicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in rankTypeTree" :key="index" class="popup-item"
                    @click="selectRankTypeItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <!-- 当前段位选择弹窗 -->
    <el-dialog v-model="currentTaskTypePopup" title="请选择当前段位" width="1000" :before-close="hideCurrentTaskTypePicker">
        <view class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div scroll-y class="popup-nav">
                    <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                        :class="{ active: currentTaskGroupIndex === groupIndex }"
                        @click="selectCurrentTaskGroup(groupIndex)">
                        {{ group.text }}
                    </view>
                </div>

                <!-- 右侧选择内容 -->
                <div scroll-y class="popup-scroll">
                    <view v-if="currentTaskGroupIndex !== null" class="popup-group">
                        <view v-for="(item, itemIndex) in Task[currentTaskGroupIndex].children" :key="itemIndex"
                            class="popup-item">
                            <div class="popup-item-title">{{ item.text }}</div>
                            <div class="popup-item-body">
                                <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                    @click="selectCurrentTaskItem(item.text, item2.text)" class="popup-item-body-item">
                                    <span>{{ item2.text }}</span>
                                </view>
                            </div>
                        </view>
                    </view>
                    <view v-else class="popup-empty">请选择左侧分类</view>
                </div>
            </div>
        </view>
    </el-dialog>
    <!-- 目标段位选择弹窗 -->
    <el-dialog v-model="toTaskTypePopup" title="请选择目标段位" width="1000" :before-close="hideToTaskTypePicker">
        <view class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div scroll-y class="popup-nav">
                    <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                        :class="{ active: toTaskGroupIndex === groupIndex }" @click="selectToTaskGroup(groupIndex)">
                        {{ group.text }}
                    </view>
                </div>

                <!-- 右侧选择内容 -->
                <div scroll-y class="popup-scroll">
                    <view v-if="toTaskGroupIndex !== null" class="popup-group">
                        <view v-for="(item, itemIndex) in Task[toTaskGroupIndex].children" :key="itemIndex"
                            class="popup-item">
                            <div class="popup-item-title">{{ item.text }}</div>
                            <div class="popup-item-body">
                                <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                    @click="selectToTaskItem(item.text, item2.text)" class="popup-item-body-item">
                                    <span>{{ item2.text }}</span>
                                </view>
                            </div>
                        </view>
                    </view>
                    <view v-else class="popup-empty">请选择左侧分类</view>
                </div>
            </div>
        </view>
    </el-dialog>
    <!-- 当前胜点弹窗 -->
    <el-dialog v-model="currentScorePopup" width="1000" :before-close="hideCurrentScorePicker">
        <view class="popup-content">
            <view>
                <div class="level">
                    <span>当前胜点</span>
                    <input type="number" placeholder="请输入当前胜点" v-model="currentScore">
                </div>
            </view>
        </view>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="hideCurrentScorePicker">取消</el-button>
                <el-button type="primary" @click="confirmCurrentScorePicker">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 上赛季段位选择弹窗 -->
    <el-dialog v-model="beforeLevelPopup" width="1000" :before-close="hideBeforeLevelPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in beforeLevelTree" :key="index" class="popup-item"
                    @click="selectBeforeLevelItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <!-- 需打场次选择器弹窗 -->
    <el-dialog v-model="needGamesPopup" width="1000" :before-close="hideNeedGamesPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in needGamesTree" :key="index" class="popup-item"
                    @click="selectNeedGamesItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <div class="special-task" @click="changeShowOrder" v-if="!showOrder">
        <div class="label">预约下单</div>
    </div>
    <DLYXLMsubmitOrder v-if="showOrder" :formDataInput="formData"></DLYXLMsubmitOrder>
  </div>
</template>
<script>
import DLYXLMsubmitOrder from '../../views/DL/YXLMsubmitOrder/index.vue';
import { pinyin } from 'pinyin-pro';

export default {
    name: 'YXLMDL',
    components: {
        DLYXLMsubmitOrder
    },
    data() {
        return {
            showOrder: false,
            // 英雄数据
            heroTree: [
                { "text": "辛德拉", "value": "辛德拉" }, { "text": "薇恩", "value": "薇恩" }, { "text": "亚托克斯", "value": "亚托克斯" },
                { "text": "阿卡丽", "value": "阿卡丽" }, { "text": "雷恩加尔", "value": "雷恩加尔" }, { "text": "塔里克", "value": "塔里克" },
                { "text": "克烈", "value": "克烈" }, { "text": "金克丝", "value": "金克丝" }, { "text": "吉格斯", "value": "吉格斯" },
                { "text": "艾尼维亚", "value": "艾尼维亚" }, { "text": "丽桑卓", "value": "丽桑卓" }, { "text": "卡特琳娜", "value": "卡特琳娜" },
                { "text": "斯维因", "value": "斯维因" }, { "text": "菲兹", "value": "菲兹" }, { "text": "韦鲁斯", "value": "韦鲁斯" },
                { "text": "艾翁", "value": "艾翁" }, { "text": "黑默丁格", "value": "黑默丁格" }, { "text": "艾瑞莉娅", "value": "艾瑞莉娅" },
                { "text": "泰隆", "value": "泰隆" }, { "text": "赵信", "value": "赵信" }, { "text": "嘉文四世", "value": "嘉文四世" },
                { "text": "盖伦", "value": "盖伦" }, { "text": "奎因", "value": "奎因" }, { "text": "莫甘娜", "value": "莫甘娜" },
                { "text": "萨科", "value": "萨科" }, { "text": "奥莉安娜", "value": "奥莉安娜" }, { "text": "格雷福斯", "value": "格雷福斯" },
                { "text": "锐雯", "value": "锐雯" }, { "text": "迦娜", "value": "迦娜" }, { "text": "布隆", "value": "布隆" },
                { "text": "布兰德", "value": "布兰德" }, { "text": "卡莉丝塔", "value": "卡莉丝塔" }, { "text": "波比", "value": "波比" },
                { "text": "伊芙琳", "value": "伊芙琳" }, { "text": "拉克丝", "value": "拉克丝" }, { "text": "乐芙兰", "value": "乐芙兰" },
                { "text": "俄洛伊", "value": "俄洛伊" }, { "text": "普朗克", "value": "普朗克" }, { "text": "艾希", "value": "艾希" },
                { "text": "塔姆", "value": "塔姆" }, { "text": "安妮", "value": "安妮" }, { "text": "娜美", "value": "娜美" },
                { "text": "雷克顿", "value": "雷克顿" }, { "text": "锤石", "value": "锤石" }, { "text": "兰博", "value": "兰博" },
                { "text": "维克托", "value": "维克托" }, { "text": "亚索", "value": "亚索" }, { "text": "黛安娜", "value": "黛安娜" },
                { "text": "莫德凯撒", "value": "莫德凯撒" }, { "text": "婕拉", "value": "婕拉" }, { "text": "阿狸", "value": "阿狸" },
                { "text": "古拉加斯", "value": "古拉加斯" }, { "text": "特朗德尔", "value": "特朗德尔" }, { "text": "约里克", "value": "约里克" },
                { "text": "崔斯特", "value": "崔斯特" }, { "text": "凯南", "value": "凯南" }, { "text": "奈德丽", "value": "奈德丽" },
                { "text": "奥拉夫", "value": "奥拉夫" }, { "text": "沃利贝尔", "value": "沃利贝尔" }, { "text": "辛吉德", "value": "辛吉德" },
                { "text": "瑟庄妮", "value": "瑟庄妮" }, { "text": "瑞兹", "value": "瑞兹" }, { "text": "希瓦娜", "value": "希瓦娜" },
                { "text": "崔丝塔娜", "value": "崔丝塔娜" }, { "text": "泰达米尔", "value": "泰达米尔" }, { "text": "李青", "value": "李青" },
                { "text": "纳尔", "value": "纳尔" }, { "text": "卡西奥佩娅", "value": "卡西奥佩娅" }, { "text": "费德提克", "value": "费德提克" },
                { "text": "慎", "value": "慎" }, { "text": "阿利斯塔", "value": "阿利斯塔" }, { "text": "茂凯", "value": "茂凯" },
                { "text": "德莱厄斯", "value": "德莱厄斯" }, { "text": "拉莫斯", "value": "拉莫斯" }, { "text": "凯特琳", "value": "凯特琳" },
                { "text": "蔚", "value": "蔚" }, { "text": "孙悟空", "value": "孙悟空" }, { "text": "娑娜", "value": "娑娜" },
                { "text": "卡蜜尔", "value": "卡蜜尔" }, { "text": "德莱文", "value": "德莱文" }, { "text": "墨菲特", "value": "墨菲特" },
                { "text": "阿兹尔", "value": "阿兹尔" }, { "text": "内瑟斯", "value": "内瑟斯" }, { "text": "阿木木", "value": "阿木木" },
                { "text": "厄运小姐", "value": "厄运小姐" }, { "text": "加里奥", "value": "加里奥" }, { "text": "诺提勒斯", "value": "诺提勒斯" },
                { "text": "克格莫", "value": "克格莫" }, { "text": "凯尔", "value": "凯尔" }, { "text": "扎克", "value": "扎克" },
                { "text": "卢锡安", "value": "卢锡安" }, { "text": "基兰", "value": "基兰" }, { "text": "艾克", "value": "艾克" },
                { "text": "沃里克", "value": "沃里克" }, { "text": "厄加特", "value": "厄加特" }, { "text": "乌迪尔", "value": "乌迪尔" },
                { "text": "蕾欧娜", "value": "蕾欧娜" }, { "text": "斯卡纳", "value": "斯卡纳" }, { "text": "卡尔萨斯", "value": "卡尔萨斯" },
                { "text": "伊泽瑞尔", "value": "伊泽瑞尔" }, { "text": "卡尔玛", "value": "卡尔玛" }, { "text": "赛恩", "value": "赛恩" },
                { "text": "杰斯", "value": "杰斯" }, { "text": "图奇", "value": "图奇" }, { "text": "易", "value": "易" },
                { "text": "菲奥娜", "value": "菲奥娜" }, { "text": "贾克斯", "value": "贾克斯" }, { "text": "烬", "value": "烬" },
                { "text": "璐璐", "value": "璐璐" }, { "text": "维迦", "value": "维迦" }, { "text": "巴德", "value": "巴德" },
                { "text": "弗拉基米尔", "value": "弗拉基米尔" }, { "text": "雷克塞", "value": "雷克塞" }, { "text": "卡萨丁", "value": "卡萨丁" },
                { "text": "科加斯", "value": "科加斯" }, { "text": "卡兹克", "value": "卡兹克" }, { "text": "玛尔扎哈", "value": "玛尔扎哈" },
                { "text": "维克兹", "value": "维克兹" }, { "text": "努努和威朗普", "value": "努努和威朗普" }, { "text": "提莫", "value": "提莫" },
                { "text": "塔莉垭", "value": "塔莉垭" }, { "text": "库奇", "value": "库奇" }, { "text": "劫", "value": "劫" },
                { "text": "魔腾", "value": "魔腾" }, { "text": "千珏", "value": "千珏" }, { "text": "泽拉斯", "value": "泽拉斯" },
                { "text": "希维尔", "value": "希维尔" }, { "text": "潘森", "value": "潘森" }, { "text": "赫卡里姆", "value": "赫卡里姆" },
                { "text": "布里茨", "value": "布里茨" }, { "text": "伊莉丝", "value": "伊莉丝" }, { "text": "索拉卡", "value": "索拉卡" },
                { "text": "奥瑞利安·索尔", "value": "奥瑞利安·索尔" }, { "text": "蒙多医生", "value": "蒙多医生" }, { "text": "厄斐琉斯", "value": "厄斐琉斯" },
                { "text": "卡莎", "value": "卡莎" }, { "text": "凯隐", "value": "凯隐" }, { "text": "莉莉娅", "value": "莉莉娅" },
                { "text": "妮蔻", "value": "妮蔻" }, { "text": "奥恩", "value": "奥恩" }, { "text": "派克", "value": "派克" },
                { "text": "奇亚娜", "value": "奇亚娜" }, { "text": "洛", "value": "洛" }, { "text": "芮尔", "value": "芮尔" },
                { "text": "莎弥拉", "value": "莎弥拉" }, { "text": "赛娜", "value": "赛娜" }, { "text": "萨勒芬妮", "value": "萨勒芬妮" },
                { "text": "瑟提", "value": "瑟提" }, { "text": "塞拉斯", "value": "塞拉斯" }, { "text": "佛耶戈", "value": "佛耶戈" },
                { "text": "霞", "value": "霞" }, { "text": "永恩", "value": "永恩" }, { "text": "悠米", "value": "悠米" },
                { "text": "佐伊", "value": "佐伊" }, { "text": "格温", "value": "格温" }, { "text": "阿克尚", "value": "阿克尚" },
                { "text": "薇古丝", "value": "薇古丝" }, { "text": "泽丽", "value": "泽丽" }, { "text": "烈娜塔", "value": "烈娜塔" },
                { "text": "尼菈", "value": "尼菈" }, { "text": "卑尔维斯", "value": "卑尔维斯" }, { "text": "奎桑提", "value": "奎桑提" },
                { "text": "明烛", "value": "明烛" }, { "text": "纳亚菲利", "value": "纳亚菲利" }, { "text": "贝蕾亚", "value": "贝蕾亚" },
                { "text": "斯莫德", "value": "斯莫德" }, { "text": "阿萝拉", "value": "阿萝拉" }
            ],
            hero: "",
            searchQuery: '',
            // 区服数据
            serverTree: [
                {
                    label: '电信',
                    value: "电信",
                    children: [
                        { label: '艾欧尼亚', value: "艾欧尼亚" }, { label: '祖安', value: "祖安" }, { label: '诺克萨斯', value: "诺克萨斯" },
                        { label: '班德尔城', value: "班德尔城" }, { label: '皮尔特沃夫', value: "皮尔特沃夫" }, { label: '战争学院', value: "战争学院" },
                        { label: '巨神峰', value: "巨神峰" }, { label: '雷瑟守备', value: "雷瑟守备" }, { label: '裁决之地', value: "裁决之地" },
                        { label: '黑色玫瑰', value: "黑色玫瑰" }, { label: '暗影岛', value: "暗影岛" }, { label: '钢铁烈阳', value: "钢铁烈阳" },
                        { label: '均衡教派', value: "均衡教派" }, { label: '水晶之痕', value: "水晶之痕" }, { label: '影流', value: "影流" },
                        { label: '守望之海', value: "守望之海" }, { label: '征服之海', value: "征服之海" }, { label: '卡拉曼达', value: "卡拉曼达" },
                        { label: '皮城警备', value: "皮城警备" },
                    ]
                },
                {
                    label: '网通',
                    value: "网通",
                    children: [
                        { label: '比尔吉沃特', value: "比尔吉沃特" }, { label: '德玛西亚', value: "德玛西亚" }, { label: '弗雷尔卓德', value: "弗雷尔卓德" },
                        { label: '无畏先锋', value: "无畏先锋" }, { label: '恕瑞玛', value: "恕瑞玛" }, { label: '扭曲丛林', value: "扭曲丛林" },
                        { label: '巨龙之巢', value: "巨龙之巢" }
                    ]
                },
                {
                    label: '全网络',
                    value: "全网络",
                    children: [
                        { label: '男爵领域', value: "男爵领域" }, { label: '峡谷之巅', value: "峡谷之巅" }
                    ]
                },
                {
                    label: '其它',
                    value: "其它",
                    children: [
                        { label: '教育网专区', value: "教育网专区" }
                    ]
                },
            ],
            selectedServer: "艾欧尼亚",
            selectedGroupIndex: 0,
            serverPopup: false,
            // 代练类型数据
            modeTree: [
                { text: '排位赛', value: "排位赛" },
                { text: '定位赛', value: "定位赛" },
                { text: '代币', value: "代币" },
                { text: '宝典', value: "宝典" },
            ],
            mode: "排位赛",
            modePopup: false,
            // 游戏模式数据
            gameModeTree: [
                { text: '不限模式', value: "不限模式" },
                { text: '禁止排位', value: "禁止排位" },
                { text: '仅限匹配', value: "仅限匹配" },
                { text: '仅限云顶', value: "仅限云顶" },
            ],
            gameMode: "不限模式",
            gameModePopup: false,
            // 通行证数据
            selectPass: "已有通行证",
            // 代币任务数据
            currentTokens: '',
            toTokens: '',
            currentTokensPopup: false,
            // 宝典任务数据
            currentLevel: '',
            toLevel: '',
            currentLevelPopup: false,
            // 排位类型数据
            rankTypeTree: [
                { text: '单双排', value: "单双排" },
                { text: '灵活组排', value: "灵活组排" }
            ],
            rankType: "",
            rankTypePopup: false,
            // 段位任务数据
            Task: [],
            currentTask: "",
            currentTaskGroupIndex: 0,
            currentTaskTypePopup: false,
            toTask: "",
            toTaskGroupIndex: 0,
            toTaskTypePopup: false,
            // 当前胜点数据
            currentScore: '',
            currentScorePopup: false,
            // 上赛季段位数据
            beforeLevelTree: [
                { text: '新号', value: "新号" },
                { text: '黑铁', value: "黑铁" },
                { text: '青铜', value: "青铜" },
                { text: '白银', value: "白银" },
                { text: '黄金', value: "黄金" },
                { text: '铂金', value: "铂金" },
                { text: '翡翠', value: "翡翠" },
                { text: '钻石', value: "钻石" },
                { text: '大师', value: "大师" },
            ],
            beforeLevel: "",
            beforeLevelPopup: false,
            // 需打场次数据
            needGamesTree: [
                { text: '1场', value: "1场" },
                { text: '2场', value: "2场" },
                { text: '3场', value: "3场" },
                { text: '4场', value: "4场" },
                { text: '5场', value: "5场" }
            ],
            needGames: "",
            needGamesPopup: false,
            // 订单提交数据
            formData: {
                server: '',
                mode: '',
                gameMode: '',
                selectPass: '',
                currentLevel: '',
                toLevel: '',
                currentTask: '',
                toTask: '',
                currentScore: '',
                needGames: '',
                beforeLevel: '',
                currentTokens: '',
                toTokens: '',
                rankType: '',
                account: '',
                password: '',
                username: '',
                contact: '',
                hero: '',
                selectedServer: '',
            },
        };
    },
    computed: {
        filteredHeroes() {
            if (!this.searchQuery) return this.heroTree;

            const query = this.searchQuery.toLowerCase();
            return this.heroTree.filter(item => {
                const textMatch = item.text.toLowerCase().includes(query);
                const pinyinInitials = pinyin(item.text, {
                    pattern: 'first',
                    type: 'array',
                    toneType: 'none'
                }).join('').toLowerCase();
                return textMatch || pinyinInitials.includes(query);
            });
        }
    },
    methods: {
        changeShowOrder() {
            this.showOrder = !this.showOrder;
        },
        heroFilterMethod(val) {
            this.searchQuery = val;
        },
        showServerPicker() {
            this.serverPopup = true;
        },
        hideServerPicker() {
            this.serverPopup = false;
        },
        selectGroup(index) {
            this.selectedGroupIndex = index;
        },
        selectServerItem(item) {
            this.selectedServer = item.text;
            this.hideServerPicker();
        },
        showModePicker() {
            this.modePopup = true;
        },
        hideModePicker() {
            this.modePopup = false;
        },
        selectModeItem(item) {
            this.mode = item.text;
            this.hideModePicker();
        },
        showGameModePicker() {
            this.gameModePopup = true;
        },
        hideGameModePicker() {
            this.gameModePopup = false;
        },
        selectGameModeItem(item) {
            this.gameMode = item.text;
            this.hideGameModePicker();
        },
        showCurrentTokensPicker() {
            this.currentTokensPopup = true;
        },
        hideCurrentTokensPicker() {
            this.currentTokens = '';
            this.toTokens = '';
            this.currentTokensPopup = false;
        },
        confirmCurrentTokensPicker() {
            this.formData.currentTokens = this.currentTokens;
            this.formData.toTokens = this.toTokens;
            this.currentTokensPopup = false;
        },
        showCurrentLevelPicker() {
            this.currentLevelPopup = true;
        },
        hideCurrentLevelPicker() {
            this.currentLevel = '';
            this.toLevel = '';
            this.currentLevelPopup = false;
        },
        confirmCurrentLevelPicker() {
            this.formData.currentLevel = this.currentLevel;
            this.formData.toLevel = this.toLevel;
            this.currentLevelPopup = false;
        },
        showRankTypePicker() {
            this.rankTypePopup = true;
        },
        hideRankTypePicker() {
            this.rankTypePopup = false;
        },
        selectRankTypeItem(item) {
            this.rankType = item.text;
            this.hideRankTypePicker();
        },
        createTaskList() {
            const tiers = ['黑铁', '青铜', '白银', '黄金', '铂金', '翡翠', '钻石', '大师'];
            const taskList = [];
            tiers.forEach(tier => {
                let tierItem = { label: tier, value: tier, children: [] };
                let subTierItem = { label: `${tier}`, value: `${tier}`, children: [] };
                const stars = Array.from({ length: 5 }, (_, index) => ({ label: `${index}`, value: `${index}` }));
                subTierItem.children = stars;
                tierItem.children.push(subTierItem);
                taskList.push(tierItem);
            });
            this.Task = taskList;
        },
        selectCurrentTaskGroup(index) {
            this.currentTaskGroupIndex = index;
        },
        selectCurrentTaskItem(text1, text2) {
            this.currentTask = `${text1} ${text2}`;
            this.hideCurrentTaskTypePicker();
            this.showToTaskTypePicker();
        },
        showCurrentTaskTypePicker() {
            this.currentTaskTypePopup = true;
        },
        hideCurrentTaskTypePicker() {
            this.currentTaskTypePopup = false;
        },
        selectToTaskGroup(index) {
            this.toTaskGroupIndex = index;
        },
        selectToTaskItem(text1, text2) {
            this.toTask = `${text1} ${text2}`;
            this.hideToTaskTypePicker();
        },
        showToTaskTypePicker() {
            this.toTaskTypePopup = true;
        },
        hideToTaskTypePicker() {
            this.toTaskTypePopup = false;
        },
        showCurrentScorePicker() {
            this.currentScorePopup = true;
        },
        hideCurrentScorePicker() {
            this.currentScore = '';
            this.currentScorePopup = false;
        },
        confirmCurrentScorePicker() {
            this.formData.currentScore = this.currentScore;
            this.currentScorePopup = false;
        },
        showBeforeLevelPicker() {
            this.beforeLevelPopup = true;
        },
        hideBeforeLevelPicker() {
            this.beforeLevelPopup = false;
        },
        selectBeforeLevelItem(item) {
            this.beforeLevel = item.text;
            this.hideBeforeLevelPicker();
        },
        showNeedGamesPicker() {
            this.needGamesPopup = true;
        },
        hideNeedGamesPicker() {
            this.needGamesPopup = false;
        },
        selectNeedGamesItem(item) {
            this.needGames = item.text;
            this.hideNeedGamesPicker();
        },
        submitOrder() {
            const currentServerOption = this.serverTree[this.selectedGroupIndex];
            this.formData = {
                ...this.formData,
                server: currentServerOption ? `${currentServerOption.label}/${this.selectedServer}` : '',
                mode: this.mode,
                gameMode: this.gameMode,
                selectPass: this.selectPass,
                rankType: this.rankType,
            };

            console.log("提交订单1", this.formData);
            this.$router.push({
                path: "/DL/YXLMsubmitOrder",
                query: { formData: JSON.stringify(this.formData) }
            });
        }
    },
    mounted() {
        this.createTaskList();
    }
};
</script>
<style scoped>
:deep(.el-input__wrapper) {
    height: 45px;
}

.special-task {
    width: 40%;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin: 50px auto;
}

.special-task .label {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color: #6041e9;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 16px;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-task .label:hover {
    cursor: pointer;
    background-color: #3105f8;
}

.form {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    padding: 24px 32px;
    background: #fff;
}

.form-item {
    width: 20%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    box-sizing: border-box;
}

.form-item .label {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
}

.form-item .handle {
    width: 70%;
}

.picker,
.input {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: #666;
}

.selected-tag img {
    width: 24px;
    height: 24px;
    margin-left: 20px;
}

.input-group {
    display: flex;
    gap: 20px;
}

.input-group input {
    flex: 1;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    border: 1px solid #ccc;
}

.dual-picker {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tier-picker {
    flex: 1;
    position: relative;
}

.tier-picker::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow {
    color: #666;
    font-size: 40px;
}

.picker {
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    background-color: #fff;
}

.picker::placeholder {
    color: #999;
}

input:focus {
    border-color: #388aff;
    box-shadow: 0 0 10px rgba(26, 160, 53, 0.1);
}

.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.time-selector {
    display: flex;
    align-items: center;
}

.time-scroll {
    overflow-y: auto;
    height: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.time-scroll .date-display {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #333;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item {
    cursor: pointer;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 32px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item.selected {
    color: #4080ff;
    font-weight: bold;
}

.time-scroll .time-item:last-child {
    border-bottom: none;
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    font-size: 20px;
    box-sizing: border-box;
}

.level input,
.role input {
    width: 70%;
    outline: none;
    border: none;
    font-size: 20px;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 20px;
}

.popup-content .body {
    display: flex;
    height: 500px;
}

.popup-nav {
    display: flex;
    flex-direction: column;
    width: 200px;
    border-right: 1px solid #eee;
    padding: 20px 0;
}

.nav-item {
    padding: 20px;
    font-size: 20px;
    color: #666;
    cursor: pointer;
}

.nav-item.active {
    color: #388aff;
    font-weight: bold;
    border-left: 4px solid #388aff;
    padding-left: 16px;
}

.popup-scroll {
    flex: 1;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    max-height: 500px;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-item {
    padding: 20px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 20px;
}

.popup-item-body {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 20px;
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    padding: 20px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28px;
    color: #999;
}

.popup-group {
    margin-bottom: 20px;
    max-height: 100%;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 20px;
    text-align: center;
    font-size: 28px;
    box-sizing: border-box;
}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.orderMsg {
    width: 100%;
    display: flex;
    padding: 40px;
    box-sizing: border-box;
    padding-bottom: 200px;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orderMsg .pay img,
.orderMsg .time img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 20px;
    font-weight: 700;
}

.footer {
    width: 60%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 25px;
}

.footer .tip {
    width: 100%;
    color: #aaa;
    background-color: #eee;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .button {
    width: 100%;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all .3s;
}

.footer .button:hover {
    background: #3e91ff;
    cursor: pointer;
}
</style>